import { connect } from 'umi';
import { useEffect } from 'react';
import { Spin } from 'antd';
import Header from './components/Header';
import Main from './components/Main';
import XJMain from './xjcomponents/XJMain';
import { TRDefault } from '@/components/index.js';
import NxMain from './NxMain';
import './index.less';

const DayRollingTradeStrategy = ({ loadingNum, tradeSeqList, marketId, dispatch }) => {
  useEffect(() => {
    dispatch({
      type: 'dayRollingTradeStragety/fetchProvincesEffect',
    });
    // dispatch({
    //   type: 'dayRollingTradeStragety/getStationLevelThreeEffect',
    // });
    // dispatch({
    //   type: 'dayRollingTradeStragety/fetchTradeTimeEffect',
    // });
  }, []);

  const renderMain = () => {
    if (marketId === 'PXBXJ') {
      return <XJMain />;
    } else if (marketId === 'PXBNX') {
      return <NxMain />;
    } else {
      return tradeSeqList.length ? <Main /> : <TRDefault type="empty" />;
    }
  };

  return (
    <Spin spinning={loadingNum !== 0}>
      <div className="day-rolling-trade-strategy">
        <Header />
        {renderMain()}
      </div>
    </Spin>
  );
};

export default connect(({ dayRollingTradeStragety }) => ({
  loadingNum: dayRollingTradeStragety.loadingNum,
  tradeSeqList: dayRollingTradeStragety.tradeSeqList,
  marketId: dayRollingTradeStragety.marketId,
}))(DayRollingTradeStrategy);
